<!--



表格模板

将自己所需要显示的表格页面的路径，填入对应导航栏选项的index值中

-->


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <title>Document</title>
    <script type="text/javascript" src="static/js/axios.min.js"></script>
</head>


<style>
    .el-table .warning-row {
        background: rgb(126, 238, 35);
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    /*
    包裹表格div的距離外邊距的距離
    width:85% 為寬度
    margin：為左边距
    margin-top為右边距
    */

    #app {
        width: 100%;


    }
</style>

<body>

<div id="app">
    <el-row class="demo-autocomplete">
        <el-col :span="6">
            渠道:
            <el-input v-model="input1" style="width:150px"  placeholder="请输入渠道"></el-input>
        </el-col>

        <el-col :span="6">
            产品:
            <el-input v-model="input2" style="width:150px"  placeholder="请输入产品名称"></el-input>
        </el-col>
        <el-col :span="6">
            日期:
            <el-date-picker
                    v-model="value1"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
            </el-date-picker>
            <el-col :span="6">
                <!--   空栏防止输入框往有边跑-->
            </el-col>
        </el-col>
    </el-row>
    <br>
    <el-row>
        <el-col :span="6">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="getData()">查询</el-button>

        </el-col>
    </el-row>


    <br/>

    <!--table 模板 ：data 绑定了数据 tableData-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}">
            <el-table-column
                    :formatter="dataFormat"
                    fixed
                    prop="lendingDate"
                    label="放款日期"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="loanOrderNums"
                    label="放款订单笔数"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="firstOverdue"
                    label="首逾"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="overdueTwoDay"
                    label="逾期2天"
                    width="150">
            </el-table-column>

            <el-table-column
                    prop="overdueThreeDay"
                    label="逾期3天"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="overdueSevenDay"
                    label="逾期>=7天"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="overdueFourteenDay"
                    label="逾期>=14天"
                    width="150">
            </el-table-column>

            <el-table-column
                    prop="overdueThirtyDay"
                    label="逾期>=30天"
                    width="100">
            </el-table-column>
        </el-table>
        <!--Element分頁插件 有待改进-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total="totalCount">
        </el-pagination>
    </template>
    </el-row>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
    var demo = new Vue({
        el: "#app", //绑定的div
        data() {
            return {


                value1: '',
                input2: '',
                input1: '',

                dialogFormVisible: false,  //这是点击编辑之后，原本隐藏的 编辑框就变为true，就显示编辑框
                // 总数据
                tableData: [],
                // 默认显示第几页
                currentPage: 1,
                // 总条数，根据接口获取数据长度(注意：这里不能为空)
                totalCount: 1,
                // 个数选择器（可修改）
                pageSizes: [1, 2, 3, 4],
                // 默认每页显示的条数（可修改）
                PageSize: 1,
            }
        },

        methods: {

                //时间格式转换
                dataFormat: function (row, column) {
                    //获取表格数据
                    let data = row[column.property]
                    if (data === null) {
                        return ''
                    }
                    let dt = new Date(data)
                    return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
                },
                getData() {

                    // 这里使用axios，使用时请提前引入
                    axios.get("overdue/page", {
                            params: {
                                limit: 10,
                                pageNum: this.currentPage,
                                channel: this.input1,
                                product: this.input2,
                                lendingDate:this.value1
                            }
                        }, {emulateJSON: true},
                        {
                            headers: {"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
                        }
                    ).then(reponse => {
                        console.log(reponse)
                        // 将数据赋值给tableData
                        this.tableData = reponse.data.rows
                        // 将数据的长度赋值给totalCount
                        this.totalCount = reponse.data.total
                    })
                },
                handleSizeChange(val) {
                    // 改变每页显示的条数
                    this.PageSize = val
                    // 注意：在改变每页显示的条数时，要将页码显示到第一页
                    this.currentPage = 1
                },
                // 显示第几页
                handleCurrentChange(val) {
                    // 改变默认的页数
                    this.currentPage = val
                    this.getData()
                },

                handleClick: function (val) {
                    window.location.href = 'usercondet' + '?aaa=' + encodeURI(val.channel)
                }
            },
        created: function () {
            this.getData()
        },
    })

    //分页还没写


</script>
</html>